<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./font/font5/iconfont.css">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <div class="top">
            <p onclick="back()"></p>
            <p>我的当当</p>
            <p onclick="show()"></p>
        </div>
        <div class="hide">
            <ul>
                <li>
                    <a href="">
                        <i class="iconfont icon-shouye"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-fenlei"></i>
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="./worth.html">
                        <i class="iconfont icon-dai"></i>
                        <p>值得买</p>
                    </a>
                </li>
                <li>
                    <a href="./car.html">
                        <i class="iconfont icon-che"></i>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="./main.html">
                        <i class="iconfont icon-wode"></i>
                        <p>我的当当</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="bg">
        
    </div>
    <ul class="main">
        <li>
            <p>0</p>
            <p>收藏的商品</p>
        </li>
        <li>
            <p>0</p>
            <p>关注的店铺</p>
        </li>
        <li>
            <p>0</p>
            <p>我的足迹</p>
        </li>
    </ul>
    <div class="card">
        <div>
            <img src="https://img63.ddimg.cn/upload_img/00487/11111/wd-012-1.png" alt="">
            <p>我的订单</p>
        </div>
        <span>查看全部购买商品</span>
    </div>
    <ul class="serve">
        <li>
            <p>待付款</p>
        </li>
        <li>
            <p>待收货</p>
        </li>
        <li>
            <p>退换货</p>
        </li>
    </ul>
    <div class="card card-one">
        <div>
            <img src="https://img61.ddimg.cn/upload_img/00528/000/vip-1521514865.png" alt="">
            <p>会员中心</p>
        </div>
    </div>
    <div class="card">
        <div>
            <img src="https://img62.ddimg.cn/upload_img/00487/11111/wd-012-02.png" alt="">
            <p>我的礼券</p>
        </div>
    </div>
    <div class="card">
        <div>
            <img src="https://img60.ddimg.cn/upload_img/00487/11111/wd-012-03.png" alt="">
            <p>积分抵现</p>
        </div>
    </div>
    <div class="card">
        <div>
            <img src="https://img62.ddimg.cn/upload_img/00528/1234/111.png" alt="">
            <p>我的电子书</p>
        </div>
    </div>
    <div class="card">
        <div>
            <img src="https://img61.ddimg.cn/upload_img/00487/11111/wd-012-04.png" alt="">
            <p>我的礼品卡</p>
        </div>
    </div>
    <div class="card">
        <div>
            <img src="https://img63.ddimg.cn/upload_img/00487/11111/wd-012-05.png" alt="">
            <p>收货地址</p>
        </div>
    </div>
    <div class="card card-one">
        <div>
            <img src="https://img60.ddimg.cn/upload_img/00487/11111/wd-012-07.png" alt="">
            <p>客服反馈</p>
        </div>
    </div>
    <div class="title">
        <p><img src="" alt="">根据您的偏好猜您可能喜欢</p>
    </div>
    <ul class="list">
        
    </ul>
    <div class="white"></div>
    <div class="login">
        <div class="login-left">
            
        </div>
        <div class="login-right">
            <p>TOP</p>
        </div>
    </div>
    <div class="last">
        <p>
            <span>提建议</span>
            <span>电脑版</span>
            <span>帮&nbsp;助</span>
        </p>
        <p>Copyright ©2018 北京当当网信息技术有限公司</p>
        <p>京ICP备17043473号-1</p>
    </div>
    <div class="end">
         <ul>
                <li>
                    <a href="">
                        <i class="iconfont icon-shouye"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont icon-fenlei"></i>
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="./worth.html">
                        <i class="iconfont icon-dai"></i>
                        <p>值得买</p>
                    </a>
                </li>
                <li>
                    <a href="./car.html">
                        <i class="iconfont icon-che"></i>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="./main.html">
                        <i class="iconfont icon-wode"></i>
                        <p>我的当当</p>
                    </a>
                </li>
            </ul>
    </div>
    <img class="goTop" src="./img/gotop.png" alt="">
</body>
<script src="./js/reset-5.js"></script>
<script src="./js/main-5.js"></script>
<script>
    function show(){
        var top=document.querySelector(".top")
        var header=document.querySelector(".header")
        top.lastElementChild.classList.toggle("on") 
        header.classList.toggle("headers") 
    }
    var list=document.querySelector(".list")
    data.forEach(function(item,index){
        list.innerHTML+=`
        <li>
            <img src="${item.image_url}" alt="">
            <p class="intro">${item.name}</p>
            <div class="lab"></div>
            <p class="price">￥${item.price}</p>
        </li>
        `
        var lab=document.querySelectorAll(".lab")
        lab[index].innerHTML=''
        for(var i=0; i<item.productTags.length; i++){
            lab[index].innerHTML+=`
            <span>${item.productTags[i].name}</span>
            `
        }

    })

    //登录
    var bg=document.querySelector(".bg")
    if(localStorage.getItem("login")==null){
        bg.innerHTML=``
        bg.innerHTML+=`
            <p class="enter" onclick="login()">登录/注册</p>
        `
    }else{
        bg.innerHTML=``
        bg.innerHTML+=`
                <div class="logins">
                    <img src="./img/user.png" alt="">
                    <p>你好，${localStorage.getItem("name")}</p>
                    <p onclick='quit()'>退出登陆</p>
                </div>
              `
    }
    
    function login(){
        var name=prompt("请输入用户名")
        var pwd=prompt("请输入密码")
        if(name=="zhangsan"&&pwd=="123456"){
            alert("登录成功")
            localStorage.setItem("login",1)
            localStorage.setItem("name",name)
            localStorage.setItem("pwd",pwd)
            bg.innerHTML=``
            bg.innerHTML+=`
                <div class="logins">
                    <img src="./img/user.png" alt="">
                    <p>你好，${name}</p>
                    <p onclick='quit()'>退出登陆</p>
                </div>
            `
        }else{
            alert("登录失败,请重新登陆。")
        }
        var asd=document.querySelector(".login-left")
        if(localStorage.getItem("login")==null){
            asd.innerHTML+=`
                <p onclick='login()'>登陆</p>
                <p onclick='login()'>注册</p>
            `
        }else{
            asd.innerHTML=``
            asd.innerHTML+=`
                <p onclick='quit()'>退出</p>
            `
        }
    }

    var asd=document.querySelector(".login-left")
    if(localStorage.getItem("login")==null){
            asd.innerHTML+=`
                <p onclick='login()'>登陆</p>
                <p onclick='login()'>注册</p>
            `
        }else{
            asd.innerHTML=``
            asd.innerHTML+=`
                <p onclick='quit()'>退出</p>
            `
        }
    
    // 退出登录
    function quit(){
        localStorage.clear()
        asd.innerHTML=``
        asd.innerHTML+=`
                <p onclick='login()'>登陆</p>
                <p onclick='login()'>注册</p>
        `
        bg.innerHTML=``
        bg.innerHTML+=`
            <p class="enter" onclick="login()">登录/注册</p>
        `
    }

    // 一定位置显示回到顶部按钮
    window.onscroll=function(){
        if(window.scrollY>=500){
            goTop.style.display="block"
        }else{
            goTop.style.display="none"
        }
    }


    // 回到顶部
    var goTop=document.querySelector(".goTop")
    goTop.onclick=function(){
        window.scrollTo({
            top:0,
            left:0,
            behavior:"smooth"
        })
    }

    function back(){
        window.history.back()
    }
</script>
</html>